<template lang="">
    <div class="box" >
       <div class="box" ref="box"></div>
    </div>
</template>
<script>
import * as echarts from "echarts"
import "@/assets/world.js"
import { data } from '@/assets/dataMap.js'
import { nameMap } from '../assets/nameMap(1)'
export default {
  components:{
    nameMap , data
  },
  data() {
    return {
      

    }
  },
  mounted() {
    this.echar()
  },
  methods: {
    echar() {
      let mychart = echarts.init(this.$refs.box)

      let option = {

      visualMap:{
        type:'piecewise',
        min:0,
        max:2400000,
        textStyle:{
          color:'#6c7cbf'
        }
      },
      series:[
        {
          type:'map',
          mapType:'world',
          data:data,
          // nameMap: nameMap,
        }
      ]

      }
      mychart.setOption(option)
    }
  }
}
</script>
<style lang="less" scoped>
.box {
  width: 600px;
  height: 400px;
  // border: 1px solid #000;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
</style>